import React, {Component} from 'react';
import {
    Text,
    StyleSheet,
    ScrollView,
    View
} from 'react-native';
import {Calendar} from 'react-native-calendars';
import Modal from 'react-native-modal';

export default class CalendarsScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible:false
        };
        this.onDayPress = this.onDayPress.bind(this);
    }
    show = () =>{
        // this.setState({visible:true});

    };

    hide = () => {
        // this.setState({visible:false});
       
    };
    // isVisible={this.state.visible}
    // backdropColor="black"
    // backdropOpacity={0.4}
    // animationIn="slideInUp"
    // animationOut="slideOutDown"
    // backdropTransitionInTiming={1000}
    // backdropTransitionOutTiming={1000}
    render() {
        return (

 
                   <Calendar
                       onDayPress={this.onDayPress}
                       style={styles.calendar}
                       hideExtraDays
                       markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}}}
                   />

        );
    }

    onDayPress(day) {
        this.setState({
            selected: day.dateString
        });
    }
}

const styles = StyleSheet.create({
    calendar: {
       borderRadius:8
    },

});